import { useState, useEffect } from "react";
import CityList from "./components/CityList";
import CountryList from "./components/CountryList";
import { getHolidayData, getStayInfo } from "./utils/utils";
import Map from "./components/useMap";
import HolidayList from "./components/HolidayList";
import "./index.less";
const HomePage = () => {
  const [currentCountry, setCurrentCountry] = useState<any>();
  const [holidayList, setHolidayList] = useState<any[]>();
  const [lngLat, setLngLat] = useState<any>();
  const [cityName, setCityName] = useState<any>();
  const [cityStay, setCityStay] = useState<any>([]);
  const [holidayDate, setHolidayDate] = useState<any>();
  const [loading, setLoading] = useState<boolean>();

  useEffect(() => {
    setLoading(true);
    getHolidayData(currentCountry).then((res: any) => {
      if (res && res[0]) {
        setHolidayList(res);
      } else {
        setHolidayList({});
        setHolidayDate('');
      }
      setTimeout(() => {
        setLoading(false);
      }, 500);
    });
  }, [currentCountry]);
  useEffect(() => {
    if (!cityName) return;
    const params = {
      ...lngLat,
      region: cityName,
    };
    
    getStayInfo(params).then((res) => {
      setCityStay(res);
      setLoading(true);
      setTimeout(() => {
        setLoading(false);
      }, 500);
    });
  }, [lngLat, cityName]);
  return (
    <div className="main_container">
      <CountryList setCurrentCountry={setCurrentCountry} />
      <div className="main_container_holidayList">
        <div className="tilte_text">节假日列表</div>
        <HolidayList holidayList={holidayList} setHolidayDate={setHolidayDate} loading={loading} />
      </div>
      <CityList
        currentCountry={currentCountry}
        holidayDate={holidayDate}
        setLngLat={setLngLat}
        setCityName={setCityName}
      />

      <div className="main_container_map">
        <div className="tilte_text">住宿信息</div>
        {<Map lngLat={lngLat} cityStay={cityStay} loading={loading} />}
      </div>
    </div>
  );
};
export default HomePage;
